<template>
	<div>
		<div class="mb-4 py-5 rounded-lg text-t-1 bg-[#1B2538]">
			<div class="grid grid-cols-2 md:grid-cols-4 gap-y-4">
				<div class="px-[30px] py-4 flex flex-col relative">
					<div class="absolute right-0 top-[15%] h-[70%] w-[1px] bg-border-1"></div>
					<div class="text-t-3 text-sm">{{ $t('agent.activity.CreatedCampaigns') }}</div>
					<div class="text-lg mt-2">{{ createdCampaigns }}</div>
				</div>
				<div class="px-[30px] py-4 flex flex-col">
					<div class="text-t-3 text-sm">{{ $t('agent.activity.SignupsCount') }}</div>
					<div class="text-lg mt-2">{{ signupsCount }}</div>
				</div>
				<div class="px-[30px] py-4 flex flex-col relative">
					<div class="absolute right-0 top-[15%] h-[70%] w-[1px] bg-border-1"></div>
					<div class="text-t-3 text-sm">{{ $t('agent.activity.TotalEarnings') }}</div>
					<div class="text-lg mt-2">{{ formatNumber(totalEarnings, option) }}</div>
				</div>
				<div class="px-[30px] py-4 flex items-center justify-center">
					<base-button
						type="primary"
						@click="handleGetCode"
						:loading="loading"
						style="width: 120px; height: 40px; border-radius: 99px">
						{{ $t('agent.activity.CreateCampaign') }}
					</base-button>
				</div>
			</div>
		</div>
		<base-loading-box :isEmpty="!listData.length" :loading="isLoading" />
		<activity-item
			v-for="item in listData"
			:key="`activity-${item.id}`"
			:data="item"
			@refresh="getDetail"></activity-item>
	</div>
	<CreateCampaignModal
		:isVisible="showModal"
		:getCode="campaignCode"
		@update:isVisible="showModal = $event"
		@submit="handleCreateCampaign" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { BaseButton } from '@/components/base'
import BaseLoadingBox from '@/components/base/loading-box/index.vue'
import ActivityItem from './activity-item.vue'
import CreateCampaignModal from './components/CreateCampaignModal.vue'
import { showError } from '@/utils'
import { useI18n } from 'vue-i18n'
import { generateInviteCode, getInviteLinkUserDetail } from '@/api/agent'
import { useProfileStore } from '@/store'
import { formatNumber, formatToThousandsWithDecimal } from '@/utils/decimal'
// import { isDesktop } from '@/hooks'

const createdCampaigns = ref('0')
const signupsCount = ref('0')
const totalEarnings = ref('0')
const profileStore = useProfileStore()
const userId = ref<number>()
const userInfo = ref(profileStore.userInfo)
if (userInfo.value) {
	userId.value = userInfo.value.id
}
// const platform = isDesktop ? 'pc' : 'h5'
const option: {
	type: 'fiat' | 'crypto' // 法币 or 加密货币
	platform: 'pc' | 'h5' // 平台
} = {
	platform: 'h5',
	type: 'fiat'
}

const listData: any = ref([])
const isLoading = ref(false)

const getDetail = async () => {
	isLoading.value = true
	const response = await getInviteLinkUserDetail({ userId: userId.value as number })
	if (response.code === 200 && response.data) {
		createdCampaigns.value = response.data.inviteLinkCount || 0
		signupsCount.value = formatToThousandsWithDecimal(response.data.registerUserCount || 0, 0)
		totalEarnings.value = formatNumber(response.data.totalIncome || 0, option)
		listData.value = response.data.list || []
	}
	isLoading.value = false
}

const showModal = ref(false)

// 处理提交事件
const handleCreateCampaign = async (data: any) => {
	if (data.refresh) {
		await getDetail() // 重新获取列表数据
	}
}
// 使用国际化
const { t } = useI18n()
const campaignCode = ref('')
const loading = ref(false)
const handleGetCode = async () => {
	try {
		loading.value = true
		const response = await generateInviteCode()
		if (response.code === 200 && response.data?.inviteCode) {
			campaignCode.value = response.data.inviteCode
			showModal.value = true
		} else {
			showError(t('agent.activity.GenerateCodeFailed'))
			showModal.value = false
		}
	} catch (error) {
		console.error('生成邀请码失败:', error)
		showModal.value = false
		showError(t('agent.activity.GenerateCodeFailed'))
	} finally {
		loading.value = false
	}
}
// const handleUpTop = async (params: any) => {
// 	const { id } = params
// 	if (!id) return
// 	const res = await topCampaign({ id, userId: userId.value as number })
// 	if (res.code === 200) {
// 		getDetail()
// 	}
// }
// lifecycle hook
onMounted(() => {
	getDetail()
})
</script>
